{% extends 'base.html' %}
{% load tz %}
{% load static %}
{% load i18n %}
{% load  sizeformat %}

{% block head %}
{#    <link rel="stylesheet" type="text/css" href="{% static 'vdisk/vdisk.css' %}">#}
    <style>
    .mouse-hover:hover .mouse-hover-show {
        display: inline-block;
    }
    .mouse-hover-show {
        display: none;
    }
    .line-limit-length {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
{% endblock %}
{% block title %}{% translate '云硬盘列表' %}{% endblock %}

{% block boby %}
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>{% translate '云硬盘列表' %} ({{ count }})</strong></span>
                {% if request.user.is_superuser %}
                <span><a class="btn btn-sm btn-primary float-right" href="{% url 'vdisk:vdisk-create' %}">
                    {% translate '创建云硬盘' %} <i class="fa fa-plus"></i>
                </a></span>
                {% endif %}
                <span><a style="margin-right: 5px" class="btn btn-sm btn-primary float-right" href="{% url 'vdisk:vdisk-recover' %}">
                    {% translate '云硬盘归档列表' %}
                </a></span>
            </div>
            <div class="card-body">
                <form role="form" class="form-horizontal" method="get" action="">
                    <div class="input-group" style="">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-center">{% translate '数据中心' %}</label>
                        </div>
                        <select name="center" class="custom-select" id="id-center">
                            {% if centers.count > 1 %}
                                <option value="">--</option>
                            {% elif centers is None %}
                                <option value="">--</option>
                            {% endif %}
                            {% for c in centers %}
                                <option value="{{ c.id }}" {% if c.id == center_id %}selected{% endif %}>
                                    {{ c.name }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-group">{% translate '主机组' %}</label>
                        </div>
                        <select name="group" class="custom-select" id="id-group">
                            {% if groups.count > 1 %}
                                <option value="">--</option>
                            {% elif groups is None %}
                                <option value="">--</option>
                            {% endif %}
                            {% for g in groups %}
                                <option value="{{ g.id }}" {% if g.id == group_id|add:0 %}
                                        selected {% endif %}>{{ g.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-quota">{% translate '存储池' %}</label>
                        </div>
                        <select name="quota" class="custom-select" id="id-quota">
                            {% if quotas.count > 1 %}
                                <option value="">--</option>
                            {% elif quotas is None %}
                                <option value="">--</option>
                            {% endif %}
                            {% for q in quotas %}
                                <option value="{{ q.id }}" {% if q.id == quota_id|add:0 %}
                                        selected {% endif %}>{{ q.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-user">{% translate '创建者' %}</label>
                        </div>
                        <select name="user" class="custom-select" id="id-user">
                            {% if users.count > 1 %}
                                <option value="">--</option>
                            {% elif users is None %}
                                <option value="">--</option>
                            {% endif %}
                            {% for u in users %}
                                <option value="{{ u.id }}" {% if u.id == user_id %}selected {% endif %}>{{ u.username }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text">{% translate '关键字' %}</label>
                        </div>
                        <input type="text" class="form-control" name="search" value="{{ search }}"
                               placeholder="{% translate '搜 UUID、IP地址、备注' %}"/>
                        <span class="input-group-text"></span>
                        <button type="submit" class="btn btn-primary form-control">{% translate '筛选' %}</button>
                    </div>
                </form>
                <table class="table table-hover table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                    <thead class="thead-light">
                    <tr>
                        <th></th>
                        <th style="max-width: 150px;">UUID</th>
                        <th>{% translate '机组' %}</th>
                        <th>{% translate '存储池' %}</th>
                        <th>{% translate '容量' %}</th>
                        <th>{% translate '用户' %}</th>
                        <th>{% translate '创建时间' %} <span>{{ request.session.useTimeZoneOffset }}</span></th>
                        <th>{% translate '挂载虚拟机' %}</th>
                        <th>{% translate '挂载时间' %} <span>{{ request.session.useTimeZoneOffset }}</span></th>
                        <th>{% translate '状态' %}</th>
                        <th>{% translate '备注' %}</th>
                        <th>{% translate '操作' %}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for disk in vdisks %}
                        <tr id="tr_{{ disk.uuid }}">
                            <td><input type="checkbox" class="item-checkbox" value="{{ disk.uuid }}" name="select_vm"></td>
                            <td class="line-limit-length" style="max-width: 150px;" title="{{ disk.uuid }}"><b>{{ disk.uuid }}</b></td>
                            <td>{{ disk.quota.group }}</td>
                            <td>{{ disk.quota }}</td>
                            <td>{{ disk.size|sizeformat:'GB' }}</td>
                            <td>{{ disk.user }}</td>
                            {% timezone request.session.useTimeZone|default:'UTC' %}
                            <td>{{ disk.create_time|date:'Y-m-d H:i:s' }}</td>
                            {% endtimezone %}
                            {% if disk.vm %}
                                {% if disk.vm.mac_ip %}
                                <td>{{ disk.vm.ipv4 }}</td>
                                {% else %}
                                <td>{% translate '无' %}</td>
                                {% endif %}
                                {% timezone request.session.useTimeZone|default:'UTC' %}
                                <td>{{ disk.attach_time|date:'Y-m-d H:i:s' }}</td>
                                {% endtimezone %}
                            {% else %}
                                <td>{% translate '未挂载' %}</td>
                                <td>{% translate '无' %}</td>
                            {% endif %}
                            <td>
                                {%if disk.enable%}
                                    <i class="fa fa-check"></i>
                                {%else%}
                                    <i class="fa fa-times"></i>
                                {%endif%}
                            </td>
                            <td class="mouse-hover">
                                <div>
                                    <span>{{ disk.remarks|default_if_none:'' }}</span>
                                    <span class="mouse-hover-show edit_disk_remark" data-disk-uuid="{{ disk.uuid }}" title="{% translate '修改备注' %}">
                                        <i class="fa fa-edit"></i>
                                    </span>
                                </div>
                                <div id="remarks_edit" style="display:none">
                                    <textarea id="remarks">{{ disk.remarks|default_if_none:'' }}</textarea>
                                    <span class="save_disk_remark" title="{% translate '保存备注' %}" data-disk-uuid="{{ disk.uuid }}">
                                        <i class="fa fa-save"></i>
                                    </span>
                                </div>
                            </td>
                            <td>
                                {% if request.user.is_superuser %}
                                {% if disk.is_mounted %}
                                    <button type="button" class="btn btn-sm btn-warning btn-disk-umount" data-disk-uuid="{{ disk.uuid }}">{% translate '卸载' %}</button>
                                {% else %}
                                    <a class="btn btn-sm btn-success" href="{% url 'vdisk:vdisk-mount-to-vm' disk_uuid=disk.uuid %}">{% translate '挂载' %}</a>
                                {% endif %}
                                <button type="button" class="btn btn-sm btn-danger btn-disk-delete" data-disk-uuid="{{ disk.uuid }}">{% translate '删除' %}</button>
                                {% else %}
                                    <span>请联系管理员</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                {% if page_list %}
                    <div class="card-footer">
                        <nav aria-label="Page navigation">
                            <ul class="pagination"  style="margin:0;">
                                {% if previous %}
                                    <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                            aria-hidden="true">&laquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                {% endif %}

                                {% for disp, query, active in page_list %}
                                    {% if active %}
                                        <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% endif %}
                                {% endfor %}

                                {% if next %}
                                    <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vdisk/vdisk_list.js' %}"></script>
{% endblock %}

